{% extends "base.django.html" %}
{% load EXIF_filter %}

{% block head_title %}Photo{% endblock %}

{% block head_script %}
	<script type='text/javascript' src='/shell/media/js/jquery.js'></script>
	<script type='text/javascript' src='/shell/media/js/loading_effect.js'></script>
	<script type='text/javascript' src='/shell/media/js/comment_validation.js'></script>
{% endblock %}

{% block body_content %}
<div id='photo'>
	<table border='0'>
		<tr><td><p id='loading_effect'><img src='/shell/media/img/app/uploading.gif'/> Loading ...</p></td></tr>
		<tr><td><img id='photo' src='{{ photo.get_image_url }}'/></td></tr>
		<tr><td><h1 id='photo_caption'>{{ photo.caption }}</h1><p id='photo_description'>{{ photo.description }}</p></td></tr>
	</table>
	<div id='photonav'>
		{% if user.is_authenticated %}
			<a href='{% url photo-edit photo.id %}'><img class='icon' src='/shell/media/img/app/edit.png'/> Edit</a>
			<a href='{% url photo-delete photo.id %}'><img class='icon' src='/shell/media/img/app/delete.png'/> Delete</a>
		{% endif %}
	</div>
</div>

<div id='photo_album'>
	<p id='album_title'><a href='{{ photo.album.get_absolute_url }}'>{{ photo.album.title }}</a> <span class='small'>Album created {{ photo.album.date_create|timesince }} ago.</span></p>
	<p id='album_description'>{{ photo.album.description }}</p>
	<div id='album_thumbnail'>
		{% for p in photo.album.photos.all %}
			{% ifnotequal p.id photo.id %}
				<a class='thumbnail' href='{{ p.get_absolute_url }}'><img class='thumbnail' src='{{ p.get_image_thumbnail_url }}' title='{{ p.caption }}'/></a> 
			{% else %}
				<img class='currentphoto' src='{{ p.get_image_thumbnail_url }}'/>
			{% endifnotequal %}
		{% endfor %}
		{% if user.is_authenticated %}
			<a class='thumbnail' href='{% url album-photo-add photo.album.id %}'><img class='thumbnail' src='/shell/media/img/app/add.png'/></a>
		{% endif %}
	</div>
</div>

<div id='sidebar'>
	<div id='comment'>
		<!--<h1 id='comment_title'>-->
		<!--	{% if photoComment %}-->
		<!--		Comment-->
		<!--	{% else %}-->
		<!--		No comment yet.-->
		<!--	{% endif %}-->
		<!--</h1>-->
		<fieldset>
		<legend>Comment</legend>
		<ul>
			{% if not photoComment %}
				No comment yet.
			{% endif %}
			
			{% for c in photoComment %}
				{% if c.website %}
					<li>
						<div id='comment_author'>
							<p><a href='{{ c.website }}' target='blank' > {{ c.name }}</a><span class='small'> said {{ c.date_create|timesince }} ago</span></p>
						</div>
						<div id='comment_content'>
							<p>{{ c.content }}</p>
						</div>
					</li>
				{% else %}
					<li>
						<div id='comment_author'>
							<p>{{ c.name }}<span class='small'> said {{ c.date_create|timesince }} ago</span></p>
						</div>
						<div id='comment_content'>
							<p>{{ c.content }}</p>
						</div>
					</li>
				{% endif %}
			{% endfor %}
		</ul>
		</fieldset>
	
		<div class='clear'></div>
		<div id='comment_form'>
			<p>Do you wanna say something?</p>
			<form id='commentform' method='post' action='{% url photo photo.id %}'>
				<table border='0'>
					{% for f in form %}
					<tr>
						<td>
						{{ f }}
						{% ifnotequal f.label_tag '<label for="id_content">Content</label>' %}
							{{ f.label_tag }} 
							{% if f.field.required %}<span class='small'> (Required)</span>{% endif %}
						{% endifnotequal %}
						{% if f.errors %} * {% endif %}
						</td>
					</tr>
					{% endfor %}
					
					<tr><td><input type='submit' id='id_submit' class='button' value='Put it' /></td>
					</tr>
				</table>
			</form>
		</div>
	</div>

	<div id='exif'>
		<fieldset>
		<legend>EXIF</legend>
		<table border='0'>
			<!--<tr><td id='exif_title'>EXIF</td><td></td></tr>-->
			<tr><td class='align_right'>Photo No:</td><td>{{ photo.id}}</td></tr>
			<tr><td class='align_right'>Manufacturer: </td><td>{{ photo.manufacturer }}</td></tr>
			<tr><td class='align_right'>Model: </td><td>{{ photo.model|model_format:photo.manufacturer }}</td></tr>
			<tr><td class='align_right'>Date: </td><td>{{ photo.date_time }}</td></tr>
			<tr><td class='align_right'>Exposure time: </td><td>{{ photo.exposure_time|exposure_time_format }}</td></tr>
			<tr><td class='align_right'>Aperture: </td><td>{{ photo.aperture|aperture_format }}</td></tr>
			<tr><td class='align_right'>Focal length: </td><td>{{ photo.focal_length|focal_length_format }}</td></tr>
			<tr><td class='align_right'>ISO: </td><td>{{ photo.iso }}</td></tr>
			<tr><td class='align_right'>Hold: </td><td>{{ photo.get_hold_display }}</td></tr>
		</table>
	</div>
	<div class='clear'></div>
</div>

{% endblock %}